﻿<!-- DataTables CSS -->
<link href="/Asset/SBAdmin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<link href="/Asset/CB/colorbox.css" rel="stylesheet" />
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">友情链接列表</h1>
    </div>
    <!-- /.col-lg-12 -->
</div>
<div class="row">
    <div class="col-lg-12">
        <h5 style="color:red;" id="opMsg"></h5>
        <a id="a_add" title="acb" href="/Link/EditLink">添加友情链接</a>
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody data-bind="foreach:data">
                <tr>
                    <td data-bind="text:Name"></td>
                    <td data-bind="text:Link"></td>
                    <td>
                        <button class="btn btn-primary btn-xs" data-bind="click:$parent.Edit">修改</button>
                        <button class="btn btn-danger btn-xs" data-bind="click:$parent.Delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- /.col-lg-12 -->
</div>
<div class="row" id="page"></div>
<script src="/Scripts/knockout-3.4.0rc.js"></script>
<script src="/Scripts/jquery.colorbox-min.js"></script>
<script type="text/javascript">
    (function ($) {
        function ViewModel() {
            var self = this;
            self.data = ko.observableArray([]);

            function GetList(pageIndex, itemsPerPage) {
                $.get("/Link/GetData?pageIndex=" + pageIndex + "&itemsPerPage=" + itemsPerPage + "&" + Math.random(), function (data) {
                    self.data(data.Data.Items);
                    $("#page").html(data.Data.Page);
                    BindPaginate();
                });
            }
            function BindPaginate() {
                $(".paginate_button").children().each(function () {
                    $(this).click(function () {
                        var $this = $(this);
                        var pageIndex = $this.text();
                        if ($this.attr("active") != undefined) return false;
                        GetList(pageIndex, 15);
                    });
                });
            }
            GetList(1, 15);

            //
            function CB(url) {
                $.colorbox({
                    href: url,
                    width: "320px",
                    height: "250px",
                    onClosed: function () { $("ul","#side-menu").find("a[class=active]").trigger("click"); }
                });
            }
            $("#a_add").click(function () {
                var url = $(this).attr("href");
                CB(url);
                return false;
            })

            self.Edit = function () {
                var url = "/Link/EditLink?id=" + this.ID + "&" + Math.random();
                CB(url);
                return false;
            }

            self.Delete = function () {
                var url = "/Link/DeleteLink?id=" + this.ID + "&" + Math.random();
                if (false == confirm("确认要删除？")) return false;
                $.get(url, function (res) {
                    if (res.IsSuccess) {
                        $("#side-menu").find("a[class=active]").trigger("click");
                        $("#tmpData").val(res.Msg)
                    }

                });
                return false;
            }

            if ($("#tmpData").val().length > 0) {
                $("#opMsg").text($("#tmpData").val());
                $("#tmpData").val("");
            }
        }
        ko.applyBindings(new ViewModel());
    }(jQuery));
</script>